{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>折叠</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>折叠插件使用直观的动画来展示或显示内容。</p></article>






<section><header><h3>结构</h3></header><article><p>要实现折叠，一般需要两个元素：</p><ul>
<li>折叠内容元素，包含使用动画来切换显示或隐藏的内容，需要添加 <code>.collapse</code> 类，如果被折叠内容在一开始就是显示的，还需要为其添加 <code>.in</code> 类；</li>
<li>触发元素，需要添加 <code>[data-toggle="collapse"]</code> 属性，并且使用 <code>[href]</code> 或 <code>[data-target="#selector"]</code> 属性来自定用于折叠内容元素。</li>
</ul><h4>示例</h4><div class="example">
  <p>
    <button type="button" class="btn" data-toggle="collapse" data-target="#collapseExample">使用 data-target 属性</button>
    <a href="#collapseExample" data-toggle="collapse" class="btn btn-link">直接使用 href 属性</a>
  </p>
  <div class="collapse" id="collapseExample">
    <div class="bg-primary with-padding">
      <p>被折叠元素内容。</p>
      <p>多个触发元素可以指向同一个折叠内容。</p>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;p&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#collapseExample"</span><span class="tag">&gt;</span><span class="pln">使用 data-target 属性</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#collapseExample"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-link"</span><span class="tag">&gt;</span><span class="pln">直接使用 href 属性</span><span class="tag">&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"collapseExample"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bg-primary with-padding"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">被折叠元素内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">多个触发元素可以指向同一个折叠内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




<style>
#accordion > div + p {padding-top: 10px;}
</style>





<section><header><h3>折叠分组</h3></header><article><p>多个折叠如果放置在同一个父级容器元素内，可以创建一个折叠分组（手风琴效果），只需要为每个触发元素添加 <code>[data-parent="#selector"]</code> 属性，其属性值指向父级容器即可。</p><div class="example">
  <div id="accordion">
    <p>
      <a href="#collapseExample1" data-toggle="collapse" data-parent="#accordion" class="btn btn-link">折叠 1</a>
    </p>
    <div class="collapse in" id="collapseExample1">
      <div class="bg-primary with-padding">
        <p>被折叠元素内容。</p>
        <p>多个触发元素可以指向同一个折叠内容。</p>
      </div>
    </div>
    <p>
      <a href="#collapseExample2" data-toggle="collapse" data-parent="#accordion" class="btn btn-link collapsed">折叠 2</a>
    </p>
    <div class="collapse" id="collapseExample2">
      <div class="bg-success with-padding">
        <p>被折叠元素内容。</p>
        <p>多个触发元素可以指向同一个折叠内容。</p>
      </div>
    </div>
    <p>
      <a href="#collapseExample3" data-toggle="collapse" data-parent="#accordion" class="btn btn-link collapsed">折叠 3</a>
    </p>
    <div class="collapse" id="collapseExample3">
      <div class="bg-danger with-padding">
        <p>被折叠元素内容。</p>
        <p>多个触发元素可以指向同一个折叠内容。</p>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"accordion"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;p&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#collapseExample1"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">data-parent</span><span class="pun">=</span><span class="atv">"#accordion"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-link"</span><span class="tag">&gt;</span><span class="pln">折叠 1</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapse in"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"collapseExample1"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bg-primary with-padding"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;p&gt;</span><span class="pln">被折叠元素内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
      </span><span class="tag">&lt;p&gt;</span><span class="pln">多个触发元素可以指向同一个折叠内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;p&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#collapseExample2"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">data-parent</span><span class="pun">=</span><span class="atv">"#accordion"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-link collapsed"</span><span class="tag">&gt;</span><span class="pln">折叠 2</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"collapseExample2"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bg-success with-padding"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;p&gt;</span><span class="pln">被折叠元素内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
      </span><span class="tag">&lt;p&gt;</span><span class="pln">多个触发元素可以指向同一个折叠内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;p&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#collapseExample3"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">data-parent</span><span class="pun">=</span><span class="atv">"#accordion"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-link collapsed"</span><span class="tag">&gt;</span><span class="pln">折叠 3</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"collapseExample3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bg-danger with-padding"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;p&gt;</span><span class="pln">被折叠元素内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
      </span><span class="tag">&lt;p&gt;</span><span class="pln">多个触发元素可以指向同一个折叠内容。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>结合面板组使用</h4><div class="example">
  <div class="panel-group" id="accordionPanels" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" id="headingOne">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordionPanels" href="#collapseOne">
            折叠面板 1
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">折叠面板内容 1</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" id="headingTwo">
        <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordionPanels" href="#collapseTwo">
            折叠面板 2
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">折叠面板内容 2</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordionPanels" href="#collapseThree">
            折叠面板 3
          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">折叠面板内容 3</div>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-group"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"accordionPanels"</span><span class="pln"> </span><span class="atn">aria-multiselectable</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel panel-default"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"headingOne"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;h4</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-title"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">data-parent</span><span class="pun">=</span><span class="atv">"#accordionPanels"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#collapseOne"</span><span class="tag">&gt;</span><span class="pln">
          折叠面板 1
        </span><span class="tag">&lt;/a&gt;</span><span class="pln">
      </span><span class="tag">&lt;/h4&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"collapseOne"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-collapse collapse in"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">折叠面板内容 1</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel panel-default"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"headingTwo"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;h4</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-title"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapsed"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">data-parent</span><span class="pun">=</span><span class="atv">"#accordionPanels"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#collapseTwo"</span><span class="tag">&gt;</span><span class="pln">
          折叠面板 2
        </span><span class="tag">&lt;/a&gt;</span><span class="pln">
      </span><span class="tag">&lt;/h4&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"collapseTwo"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-collapse collapse"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">折叠面板内容 2</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel panel-default"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"headingThree"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;h4</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-title"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapsed"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">data-parent</span><span class="pun">=</span><span class="atv">"#accordionPanels"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#collapseThree"</span><span class="tag">&gt;</span><span class="pln">
          折叠面板 3
        </span><span class="tag">&lt;/a&gt;</span><span class="pln">
      </span><span class="tag">&lt;/h4&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"collapseThree"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-collapse collapse"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">折叠面板内容 3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




















<section><header><h3>使用方法</h3></header><article><h4>手动初始化</h4><p>通常情况下，直接使用 <code>[data-*]</code> 属性就可以使折叠正常工作，但也提供了手动使用 JavaScript 代码进行初始化方式。</p><ul>
<li><code>$().collapse()</code></li>
<li><code>$().collapse(options)</code></li>
</ul><p>其中 <code>options</code> 参数为可以选的，用于指定初始化的选项，可用选项如下：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>选项</th>
      <th>类型</th>
      <th>默认值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>parent</code></td>
      <td>selector | <code>false</code></td>
      <td><code>false</code></td>
      <td>可用设定一个选择器字符串，用于指定折叠分组的父级元素。</td>
    </tr>
    <tr>
      <td><code>toggle</code></td>
      <td>'true' | <code>false</code></td>
      <td><code>true</code></td>
      <td>是否在初始化时显示折叠内容。</td>
    </tr>
  </tbody>
</table></div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myCollapseContent'</span><span class="pun">).</span><span class="pln">collapse</span><span class="pun">({</span><span class="pln">
   toggle</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>方法</h4><h5><code>$().collapse('show')</code></h5><p>显示折叠内容。</p><h5><code>$().collapse('hide')</code></h5><p>隐藏折叠内容。</p><h5><code>$().collapse('toggle')</code></h5><p>切换显示折叠内容。</p><h5>调用方法</h5><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 显示折叠内容</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myCollapseContent'</span><span class="pun">).</span><span class="pln">collapse</span><span class="pun">(</span><span class="str">'show'</span><span class="pun">)</span></code></pre><h4>事件</h4><p>当折叠内容显示或隐藏时会在折叠内容元素上触发以下事件：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>事件</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>show.zui.collapse</code></td>
      <td>当折叠内容显示时触发。</td>
    </tr>
    <tr>
      <td><code>shown.zui.collapse</code></td>
      <td>当折叠内容显示后触发，此时动画已执行完毕。</td>
    </tr>
    <tr>
      <td><code>hide.zui.collapse</code></td>
      <td>当折叠内容隐藏时触发。</td>
    </tr>
    <tr>
      <td><code>hidden.zui.collapse</code></td>
      <td>当折叠内容隐藏后触发，此时动画已执行完毕。</td>
    </tr>
  </tbody>
</table></div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myCollapseContent'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'hidden.zui.collapse'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'折叠内容已隐藏。'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">})</span></code></pre></article></section></div>
</section>
{/block}